<style>
    .layui-form-item .layui-input-company {width: auto;padding-right: 10px;line-height: 38px;}
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        
        <div class="layui-form layuimini-form" lay-filter="user-settings">
          <input type="hidden" name="id" class="layui-input">
          <div class="layui-form-item">
              <label class="layui-form-label required">用户名</label>
              <div class="layui-input-block">
                  <input type="text" name="user_name" readonly placeholder="请输入用户名" value="" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">姓名</label>
              <div class="layui-input-block">
                  <input type="text" name="name"  placeholder="请输入姓名"  value="" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label required">手机</label>
            <div class="layui-input-block">
                <input type="number" name="phone" lay-verify="required" lay-reqtext="手机不能为空" placeholder="请输入手机"  value="" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item layui-form-text">
              <label class="layui-form-label">备注信息</label>
              <div class="layui-input-block">
                  <textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
              </div>
          </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form','miniPage','axios','jquery'], function () {
        var form = layui.form,
            $ = layui.jquery,
            layer = layui.layer,
            axios = layui.axios,
            miniPage = layui.miniPage;

        //回显数据
        axios({
          url:"/user/getOne",
          method:'get'
        }).then(res=>{
          if(res.code==0){
            let data=res.data.user
            form.val("user-settings", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    "id":data.id,
                    "user_name":data.userName,
                    "name":data.name,
                    "phone":data.phone,
                    "remark":data.remark
                });
          }else{
            layer.msg(res.message)
          } 
        }).catch(error=>{
          layer.msg("请求错误");
        })
        form.render();

        //监听提交
        form.on('submit(saveBtn)', function (data) {
          var DISABLED = 'layui-btn-disabled';
          $(':button').addClass(DISABLED); // 添加样式
          $(':button').attr('disabled', 'disabled');  // 添加属性
          let res=data.field
        
          axios({
              method:"post"
              ,url:'/user/edit'
              ,data:{
                "id":res.id,
                "userName":res.user_name,
                "name":res.name,
                "phone":res.phone,
                "remark":res.remark
              }
          }).then(res=>{
              layer.msg(res.message,{
                icon:6,  
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
              },function () {
                  $(':button').removeClass(DISABLED);
                  $(':button').removeAttr('disabled');
              })
          }).catch(res=>{
              layer.msg("请求错误",{
                icon:5,
                time:2000,
                anim:6
              },function(){
                $(':button').removeClass(DISABLED);
                $(':button').removeAttr('disabled');
              })
          });
          return false;
        });

    });
</script>